<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>长生桐全国连锁门店分布地图</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
            -webkit-tap-highlight-color: transparent;
        }
        
        body {
            background: linear-gradient(135deg, #0a1a4a, #1c2e50);
            color: #fff;
            min-height: 100vh;
            padding: 15px;
            overflow-x: hidden;
        }
        
        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 15px;
        }
        
        header {
            text-align: center;
            margin-bottom: 25px;
            padding: 25px;
            background: rgba(10, 30, 70, 0.5);
            border-radius: 16px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
            animation: fadeIn 0.8s ease;
            border: 1px solid rgba(255, 215, 0, 0.2);
            position: relative;
            overflow: hidden;
        }
        
        header::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #1a2a6c, #FFD700, #1a2a6c);
        }
        
        h1 {
            font-size: 2.6rem;
            margin-bottom: 10px;
            color: #FFD700;
            text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
        }
        
        .brand-logo {
            color: #FFD700;
            font-size: 2rem;
            animation: pulse 2s infinite;
        }
        
        .subtitle {
            font-size: 1.2rem;
            opacity: 0.9;
            max-width: 100%;
            margin: 0 auto;
            line-height: 1.6;
            color: #FFD700;
        }
        
        .content {
            display: flex;
            flex-direction: column;
            gap: 25px;
            margin-bottom: 30px;
        }
        
        .map-container {
            width: 100%;
            height: 550px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 16px;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
            overflow: hidden;
            backdrop-filter: blur(5px);
            animation: slideUp 0.8s ease;
            position: relative;
            touch-action: pan-y;
            border: 1px solid rgba(255, 215, 0, 0.15);
        }
        
        #map {
            width: 100%;
            height: 100%;
            z-index: 1;
            border-radius: 16px;
        }
        
        .info-panel {
            width: 100%;
            background: rgba(10, 30, 70, 0.5);
            border-radius: 16px;
            padding: 25px;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(5px);
            animation: slideUp 1s ease;
            border: 1px solid rgba(255, 215, 0, 0.15);
        }
        
        .panel-title {
            font-size: 1.7rem;
            margin-bottom: 20px;
            color: #FFD700;
            text-align: center;
            border-bottom: 2px solid rgba(255, 215, 0, 0.3);
            padding-bottom: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
        }
        
        .stats {
            display: flex;
            flex-wrap: nowrap;
            overflow-x: auto;
            gap: 8px;
            padding: 10px;
            margin-bottom: 20px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 10px;
            max-height: 80px;
            scrollbar-width: thin;
        }
        
        .stats::-webkit-scrollbar {
            height: 6px;
        }
        
        .stats::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 4px;
        }
        
        .stats::-webkit-scrollbar-thumb {
            background: #FFD700;
            border-radius: 4px;
        }
        
        .stat-item {
            flex: 0 0 auto;
            width: 100px;
            padding: 8px;
            border-radius: 8px;
            background: rgba(20, 40, 80, 0.6);
            transition: all 0.3s;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            min-height: 70px;
        }
        
        .stat-item:hover {
            background: rgba(255, 215, 0, 0.1);
            transform: translateY(-3px);
        }
        
        .stat-item.active {
            background: rgba(255, 215, 0, 0.2);
            box-shadow: 0 0 0 2px #FFD700;
        }
        
        .stat-name {
            font-size: 0.75rem;
            text-align: center;
            line-height: 1.2;
            margin-bottom: 5px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        
        .stat-value {
            font-weight: bold;
            color: #FFD700;
            font-size: 0.9rem;
            text-align: center;
        }
        
        .location-info {
            background: rgba(255, 215, 0, 0.1);
            border-radius: 12px;
            padding: 20px;
            margin-top: 20px;
            border-left: 4px solid #FFD700;
            font-size: 1rem;
            position: relative;
        }
        
        .location-title {
            font-size: 1.4rem;
            margin-bottom: 12px;
            color: #FFD700;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .location-detail {
            line-height: 1.7;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 1rem;
        }
        
        .store-actions {
            display: flex;
            gap: 10px;
            margin-top: 15px;
        }
        
        .delete-store-btn, .edit-store-btn {
            flex: 1;
            padding: 10px 15px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 0.95rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }
        
        .delete-store-btn {
            background: rgba(244, 67, 54, 0.2);
            color: #f44336;
            border: 1px solid #f44336;
        }
        
        .delete-store-btn:hover {
            background: #f44336;
            color: white;
        }
        
        .edit-store-btn {
            background: rgba(33, 150, 243, 0.2);
            color: #2196F3;
            border: 1px solid #2196F3;
        }
        
        .edit-store-btn:hover {
            background: #2196F3;
            color: white;
        }
        
        .distance-info {
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px dashed rgba(255, 255, 255, 0.2);
        }
        
        .distance-title {
            font-size: 1.3rem;
            margin-bottom: 15px;
            color: #FFD700;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .distance-form {
            display: flex;
            flex-direction: column;
            gap: 15px;
            margin-bottom: 20px;
        }
        
        .form-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .combined-group {
            display: flex;
            gap: 10px;
        }
        
        .combined-group select {
            flex: 1;
        }
        
        label {
            font-size: 1rem;
            color: #FFD700;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        select, input {
            padding: 12px 15px;
            border: none;
            border-radius: 8px;
            background: rgba(0, 0, 0, 0.5);
            color: white;
            font-size: 1rem;
            box-shadow: inset 0 2px 8px rgba(0,0,0,0.2);
        }
        
        select:focus, input:focus {
            outline: none;
            box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.5);
        }
        
        .distance-result {
            background: rgba(0, 0, 0, 0.3);
            padding: 15px;
            border-radius: 8px;
            margin-top: 15px;
            text-align: center;
            font-size: 1.2rem;
            color: #4CAF50;
            font-weight: bold;
            border: 1px solid rgba(76, 175, 80, 0.3);
        }
        
        .legend {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-top: 25px;
            justify-content: center;
        }
        
        .legend-item {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.95rem;
            background: rgba(255, 255, 255, 0.1);
            padding: 8px 15px;
            border-radius: 20px;
        }
        
        .legend-color {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            box-shadow: 0 0 8px rgba(0,0,0,0.4);
        }
        
        .search-box {
            display: flex;
            gap: 12px;
            margin-top: 25px;
        }
        
        input {
            flex: 1;
            padding: 12px 15px;
            border: none;
            border-radius: 8px;
            background: rgba(0, 0, 0, 0.5);
            color: white;
            font-size: 1rem;
            box-shadow: inset 0 2px 8px rgba(0,0,0,0.2);
        }
        
        input:focus {
            outline: none;
            box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.5);
        }
        
        input::placeholder {
            color: rgba(255, 255, 255, 0.6);
        }
        
        button {
            background: #FFD700;
            color: #0a1a4a;
            border: none;
            padding: 0 25px;
            border-radius: 8px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        }
        
        button:hover {
            background: #ffc400;
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(0,0,0,0.4);
        }
        
        .map-overlay {
            position: absolute;
            top: 10px;
            left: 10px;
            right: 10px;
            bottom: 10px;
            pointer-events: none;
            z-index: 2;
        }
        
        .map-title {
            position: absolute;
            top: 15px;
            left: 15px;
            background: rgba(0, 0, 0, 0.7);
            padding: 12px 20px;
            border-radius: 8px;
            font-size: 1.2rem;
            font-weight: bold;
            z-index: 10;
            pointer-events: none;
            border: 1px solid rgba(255, 215, 0, 0.3);
            color: #FFD700;
        }
        
        .store-count {
            position: absolute;
            top: 15px;
            right: 15px;
            background: rgba(0, 0, 0, 0.7);
            padding: 12px 20px;
            border-radius: 8px;
            font-size: 1.2rem;
            font-weight: bold;
            z-index: 10;
            pointer-events: none;
            border: 1px solid rgba(255, 215, 0, 0.3);
        }
        
        .store-count span {
            color: #FFD700;
        }
        
        .loading {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.85);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            border-radius: 16px;
        }
        
        .loading-spinner {
            width: 60px;
            height: 60px;
            border: 6px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top: 6px solid #FFD700;
            animation: spin 1.5s linear infinite;
            margin-bottom: 25px;
        }
        
        .loading-text {
            font-size: 1.3rem;
            color: #FFD700;
            text-align: center;
        }
        
        footer {
            text-align: center;
            padding: 25px;
            margin-top: 20px;
            background: rgba(10, 30, 70, 0.5);
            border-radius: 16px;
            font-size: 1rem;
            border: 1px solid rgba(255, 215, 0, 0.15);
        }
        
        .leaflet-popup-content-wrapper {
            background: rgba(10, 30, 70, 0.95);
            color: #fff;
            border-radius: 10px;
            border: 2px solid #FFD700;
            font-size: 1rem;
            box-shadow: 0 5px 20px rgba(0,0,0,0.5);
        }
        
        .leaflet-popup-tip {
            background: rgba(10, 30, 70, 0.95);
        }
        
        .leaflet-popup-content {
            margin: 15px;
        }
        
        .leaflet-popup-content h3 {
            color: #FFD700;
            margin-bottom: 10px;
            font-size: 1.3rem;
            border-bottom: 1px solid rgba(255, 215, 0, 0.3);
            padding-bottom: 8px;
        }
        
        .leaflet-popup-content p {
            margin: 8px 0;
            font-size: 1rem;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .stats::-webkit-scrollbar {
            width: 8px;
        }
        
        .stats::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 4px;
        }
        
        .stats::-webkit-scrollbar-thumb {
            background: #FFD700;
            border-radius: 4px;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        @keyframes slideUp {
            from { transform: translateY(30px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        @keyframes pulse {
            0% { transform: scale(1); opacity: 0.7; }
            50% { transform: scale(1.05); opacity: 1; }
            100% { transform: scale(1); opacity: 0.7; }
        }
        
        /* PC端优化 */
        @media (min-width: 992px) {
            .content {
                flex-direction: row;
            }
            
            .map-container {
                height: 700px;
                flex: 1;
            }
            
            .info-panel {
                width: 400px;
                height: 700px;
                overflow-y: auto;
            }
            
            .stats {
                max-height: 80px;
                grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
            }
            
            h1 {
                font-size: 3rem;
            }
            
            .panel-title {
                font-size: 1.9rem;
            }
            
            .location-title {
                font-size: 1.5rem;
            }
            
            .legend-item {
                font-size: 1rem;
            }
        }
        
        /* 平板设备优化 */
        @media (min-width: 768px) and (max-width: 991px) {
            .content {
                flex-direction: column;
            }
            
            .map-container {
                height: 500px;
            }
            
            .info-panel {
                height: auto;
            }
        }
        
        /* 移动设备优化 */
        @media (max-width: 767px) {
            .map-container {
                height: 450px;
            }
            
            .info-panel {
                height: auto;
            }
            
            h1 {
                font-size: 2rem;
            }
            
            header {
                padding: 15px;
            }
            
            .distance-form .form-group {
                flex-direction: column;
            }
            
            .combined-group {
                flex-direction: column;
            }
            
            .map-title {
                display: none;
            }
            
            .store-count {
                display: none;
            }
            
            .mobile-map-header {
                display: block;
                background: rgba(0, 0, 0, 0.7);
                padding: 12px 15px;
                border-radius: 8px;
                margin-bottom: 20px;
                border: 1px solid rgba(255, 215, 0, 0.3);
            }
            
            .mobile-title {
                font-size: 1.1rem;
                font-weight: bold;
                text-align: center;
                color: #FFD700;
            }
            
            .mobile-store-count {
                text-align: center;
                font-size: 0.95rem;
                margin-top: 5px;
                color: #FFD700;
            }
        }
        
        @media (min-width: 768px) {
            .mobile-map-header {
                display: none;
            }
        }
        
        /* 缩放提示 */
        .zoom-tip {
            position: absolute;
            bottom: 70px;
            right: 15px;
            background: rgba(0, 0, 0, 0.8);
            color: #fff;
            padding: 12px 18px;
            border-radius: 8px;
            font-size: 1rem;
            z-index: 1000;
            pointer-events: none;
            display: none;
            border: 1px solid rgba(255, 215, 0, 0.3);
        }
        
        @media (min-width: 992px) {
            .zoom-tip {
                display: block;
                animation: fadeIn 1s ease;
            }
        }
        
        .distance-line {
            position: absolute;
            pointer-events: none;
            z-index: 5;
        }
        
        .distance-label {
            position: absolute;
            background: rgba(0, 0, 0, 0.8);
            color: #4CAF50;
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 1rem;
            font-weight: bold;
            z-index: 10;
            pointer-events: none;
            border: 1px solid rgba(76, 175, 80, 0.3);
            box-shadow: 0 2px 10px rgba(0,0,0,0.3);
        }
        
        .action-btn {
            background: #2196F3;
            color: white;
            border: none;
            padding: 12px 20px;
            border-radius: 8px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-size: 1rem;
            margin-top: 10px;
            width: 100%;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        }
        
        .action-btn:hover {
            background: #1e88e5;
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(0,0,0,0.4);
        }
        
        .action-btn.calculate {
            background: #4CAF50;
        }
        
        .action-btn.calculate:hover {
            background: #43a047;
        }
        
        .action-btn.reset {
            background: #f44336;
        }
        
        .action-btn.reset:hover {
            background: #e53935;
        }
        
        /* 添加门店按钮 */
        .add-store-btn {
            background: #FFD700;
            color: #0a1a4a;
            border: none;
            padding: 12px 20px;
            border-radius: 8px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-size: 1.1rem;
            margin-top: 20px;
            width: 100%;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        }
        
        .add-store-btn:hover {
            background: #ffc400;
            transform: translateY(-2px);
        }
        
        /* 数据管理区域 */
        .data-management {
            background: rgba(255, 215, 0, 0.1);
            border-radius: 12px;
            padding: 20px;
            margin-top: 20px;
            border-left: 4px solid #FFD700;
        }
        
        .data-title {
            font-size: 1.4rem;
            margin-bottom: 15px;
            color: #FFD700;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .data-actions {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }
        
        .data-btn {
            background: #9C27B0;
            color: white;
            border: none;
            padding: 12px;
            border-radius: 8px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-size: 0.95rem;
        }
        
        .data-btn:hover {
            background: #7B1FA2;
            transform: translateY(-2px);
        }
        
        .data-btn.export {
            background: #2196F3;
        }
        
        .data-btn.export:hover {
            background: #1976D2;
        }
        
        .data-btn.import {
            background: #4CAF50;
        }
        
        .data-btn.import:hover {
            background: #388E3C;
        }
        
        .backup-tip {
            margin-top: 15px;
            padding: 12px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 8px;
            font-size: 0.9rem;
            line-height: 1.5;
            color: #FFD700;
            border-left: 3px solid #FFD700;
        }
        
        .backup-tip i {
            margin-right: 8px;
        }
        
        /* 省份门店分布图容器 */
        .province-chart-container {
            background: rgba(0, 0, 0, 0.2);
            border-radius: 10px;
            padding: 15px;
            margin-top: 20px;
        }
        
        .chart-title {
            font-size: 1.1rem;
            color: #FFD700;
            margin-bottom: 15px;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        
        .chart-wrapper {
            height: 180px;
            position: relative;
        }
        
        /* 饼图图例 */
        .chart-legend {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 15px;
            margin-top: 15px;
        }
        
        .chart-legend-item {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.9rem;
            color: white;
        }
        
        .chart-legend-color {
            width: 15px;
            height: 15px;
            border-radius: 50%;
        }
        
        /* 模态框样式 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            z-index: 2000;
            align-items: center;
            justify-content: center;
        }
        
        .modal-content {
            background: #0a1a4a;
            width: 90%;
            max-width: 600px;
            border-radius: 16px;
            padding: 30px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
            border: 2px solid #FFD700;
            position: relative;
            max-height: 90vh;
            overflow-y: auto;
        }
        
        .modal-header {
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .modal-title {
            font-size: 1.8rem;
            color: #FFD700;
        }
        
        .modal-body {
            margin-bottom: 25px;
        }
        
        .modal-textarea {
            width: 100%;
            height: 200px;
            background: rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(255, 215, 0, 0.3);
            border-radius: 10px;
            color: white;
            padding: 15px;
            font-family: monospace;
            font-size: 0.95rem;
            resize: none;
        }
        
        .modal-textarea:focus {
            outline: none;
            border-color: #FFD700;
            box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.3);
        }
        
        .modal-footer {
            display: flex;
            justify-content: flex-end;
            gap: 15px;
        }
        
        .modal-btn {
            padding: 10px 25px;
            border-radius: 8px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .modal-btn.cancel {
            background: #f44336;
            color: white;
        }
        
        .modal-btn.cancel:hover {
            background: #d32f2f;
        }
        
        .modal-btn.confirm {
            background: #4CAF50;
            color: white;
        }
        
        .modal-btn.confirm:hover {
            background: #388E3C;
        }
        
        .close-modal {
            position: absolute;
            top: 20px;
            right: 20px;
            background: none;
            border: none;
            color: #FFD700;
            font-size: 1.5rem;
            cursor: pointer;
        }
        
        /* 添加门店表单 */
        .add-store-form {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }
        
        .add-store-form .form-group {
            grid-column: span 1;
        }
        
        .add-store-form .form-group.full-width {
            grid-column: span 2;
        }
        
        .optional-field {
            opacity: 0.8;
        }
        
        /* 文件导入样式 */
        .file-import {
            background: rgba(0, 0, 0, 0.3);
            border: 2px dashed rgba(255, 215, 0, 0.3);
            border-radius: 12px;
            padding: 30px;
            text-align: center;
            margin: 20px 0;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .file-import:hover {
            background: rgba(0, 0, 0, 0.4);
            border-color: #FFD700;
        }
        
        .file-import i {
            font-size: 3rem;
            color: #FFD700;
            margin-bottom: 15px;
        }
        
        .file-import-text {
            font-size: 1.1rem;
            color: #FFD700;
            margin-bottom: 10px;
        }
        
        .file-input {
            display: none;
        }
        
        .file-name {
            margin-top: 10px;
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.7);
        }
        
        /* 地图切换控件 */
        .map-switcher-container {
            margin-top: 20px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 12px;
            padding: 15px;
            border: 1px solid rgba(255, 215, 0, 0.2);
        }
        
        .map-switcher-title {
            font-size: 1.2rem;
            color: #FFD700;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
            justify-content: center;
        }
        
        .map-switcher-buttons {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
        }
        
        .map-switch-btn {
            background: rgba(0, 0, 0, 0.5);
            color: #FFD700;
            border: 1px solid rgba(255, 215, 0, 0.3);
            border-radius: 8px;
            padding: 8px 5px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            font-size: 0.8rem;
            min-height: 60px;
        }
        
        .map-switch-btn i {
            font-size: 1.2rem;
            margin-bottom: 5px;
        }
        
        .map-switch-btn:hover {
            background: rgba(255, 215, 0, 0.2);
        }
        
        .map-switch-btn.active {
            background: rgba(255, 215, 0, 0.3);
            border-color: #FFD700;
        }
        
        /* API密钥折叠面板 */
        .api-collapse {
            margin-top: 20px;
        }
        
        .api-collapse .collapse-content {
            position: relative;
            margin-top: 10px;
            background: rgba(255, 87, 34, 0.1);
            border: 1px solid rgba(255, 87, 34, 0.3);
        }
        
        /* 折叠面板功能 */
        .collapse-toggle {
            background: rgba(0, 0, 0, 0.7);
            color: #FFD700;
            border: 1px solid rgba(255, 215, 0, 0.3);
            border-radius: 8px;
            padding: 10px 15px;
            cursor: pointer;
            font-weight: bold;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s;
            z-index: 1001;
        }
        
        .collapse-toggle:hover {
            background: rgba(255, 215, 0, 0.2);
        }
        
        .collapse-content {
            background: rgba(0, 0, 0, 0.7);
            border-radius: 8px;
            padding: 15px;
            margin-top: 8px;
            display: none;
            flex-direction: column;
            gap: 8px;
            border: 1px solid rgba(255, 215, 0, 0.3);
            box-shadow: 0 5px 15px rgba(0,0,0,0.5);
        }
        
        .collapse-content.active {
            display: flex;
            animation: fadeIn 0.3s ease;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1><i class="fas fa-tree brand-logo"></i> 长生桐全国连锁门店分布地图</h1>
            <p class="subtitle">本系统展示长生桐集团在全国范围内的连锁门店分布与详细信息</p>
        </header>
        
        <div class="content">
            <div class="map-container">
                <div id="map"></div>
                <div class="map-overlay">
                    <div class="map-title" id="map-title">长生桐全国门店分布</div>
                    <div class="store-count">门店总数: <span id="total-stores">0</span>家</div>
                    <div class="zoom-tip">使用鼠标滚轮缩放地图</div>
                </div>
                <div class="loading" id="loading">
                    <div class="loading-spinner"></div>
                    <div class="loading-text">正在加载长生桐门店数据...</div>
                </div>
            </div>
            
            <div class="info-panel">
                <!-- 移动端标题 -->
                <div class="mobile-map-header">
                    <div class="mobile-title" id="mobile-map-title">长生桐全国门店分布</div>
                    <div class="mobile-store-count">门店总数: <span id="mobile-total-stores">0</span>家</div>
                </div>
                
                <!-- API密钥折叠面板 -->
                <div class="api-collapse">
                    <div class="collapse-toggle" id="api-toggle">
                        <i class="fas fa-exclamation-triangle"></i> 地图服务设置
                    </div>
                    <div class="collapse-content" id="api-content">
                        <h3><i class="fas fa-exclamation-triangle"></i> 地图服务重要通知</h3>
                        <p>高德地图可能需要API密钥确保长期稳定使用</p>
                        
                        <div class="api-steps">
                            <div class="api-step">访问 <a href="https://lbs.amap.com/" target="_blank" style="color:#FFD700">高德地图开放平台</a></div>
                            <div class="api-step">注册开发者账号并登录</div>
                            <div class="api-step">创建新应用，选择"Web服务"类型</div>
                            <div class="api-step">在应用设置中获取您的API密钥(Key)</div>
                            <div class="api-step">将密钥填入下方输入框并保存</div>
                        </div>
                        
                        <div class="search-box">
                            <input type="text" id="api-key-input" placeholder="在此输入您的高德API密钥" value="a5c0d2d1d4c0e7e8b8f9a0d3c8b1d8e5">
                            <button id="save-api-key"><i class="fas fa-key"></i> 保存密钥</button>
                        </div>
                    </div>
                </div>
                
                <h2 class="panel-title"><i class="fas fa-chart-bar"></i> 门店分布概览</h2>
                
                <!-- 省份统计 - 水平滚动布局 -->
                <div class="stats" id="province-stats">
                    <!-- 动态生成的门店统计将显示在这里 -->
                    <div class="stat-item">
                        <span class="stat-name">暂无门店数据</span>
                        <span class="stat-value">0家</span>
                    </div>
                </div>
                
                <!-- 门店省份分布图 -->
                <div class="province-chart-container">
                    <div class="chart-title"><i class="fas fa-chart-pie"></i> 各省份门店数量占比</div>
                    <div class="chart-wrapper">
                        <canvas id="province-chart"></canvas>
                    </div>
                    <!-- 自定义图例 -->
                    <div class="chart-legend" id="chart-legend"></div>
                </div>
                
                <div class="location-info" id="store-details">
                    <h3 class="location-title"><i class="fas fa-map-marker-alt"></i> 点击地图上的标记查看门店详情</h3>
                    <p class="location-detail"><i class="fas fa-info-circle"></i> 请点击地图上的门店标记查看详细信息</p>
                    <div class="store-actions" style="display: none;" id="store-actions">
                        <button class="edit-store-btn" id="edit-store-btn">
                            <i class="fas fa-edit"></i> 修改信息
                        </button>
                        <button class="delete-store-btn" id="delete-store-btn">
                            <i class="fas fa-trash"></i> 删除门店
                        </button>
                    </div>
                </div>
                
                <div class="distance-info">
                    <h3 class="distance-title"><i class="fas fa-route"></i> 门店距离计算</h3>
                    <div class="distance-form">
                        <div class="form-group">
                            <label for="store1"><i class="fas fa-store"></i> 选择第一家门店</label>
                            <div class="combined-group">
                                <select id="store1-province">
                                    <option value="">-- 选择省份 --</option>
                                    <!-- 省份将通过JavaScript动态生成 -->
                                </select>
                                <select id="store1">
                                    <option value="">-- 请选择门店 --</option>
                                </select>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label for="store2"><i class="fas fa-store"></i> 选择第二家门店</label>
                            <div class="combined-group">
                                <select id="store2-province">
                                    <option value="">-- 选择省份 --</option>
                                    <!-- 省份将通过JavaScript动态生成 -->
                                </select>
                                <select id="store2">
                                    <option value="">-- 请选择门店 --</option>
                                </select>
                            </div>
                        </div>
                        
                        <button class="action-btn calculate" id="calculate-btn">
                            <i class="fas fa-calculator"></i> 计算距离
                        </button>
                        
                        <div class="distance-result" id="distance-result">
                            请选择两家门店进行计算
                        </div>
                        
                        <button class="action-btn reset" id="reset-btn">
                            <i class="fas fa-sync-alt"></i> 重置地图
                        </button>
                    </div>
                </div>
                
                <!-- 添加门店按钮 -->
                <button class="add-store-btn" id="open-add-store-modal">
                    <i class="fas fa-plus-circle"></i> 添加新门店
                </button>
                
                <!-- 数据管理区域 -->
                <div class="data-management">
                    <h3 class="data-title"><i class="fas fa-database"></i> 数据管理</h3>
                    <div class="data-actions">
                        <button class="data-btn export" id="export-btn">
                            <i class="fas fa-file-export"></i> 导出数据
                        </button>
                        <button class="data-btn import" id="import-btn">
                            <i class="fas fa-file-import"></i> 导入数据
                        </button>
                    </div>
                    <div class="backup-tip">
                        <i class="fas fa-info-circle"></i>
                        提示：使用"导出数据"功能定期备份门店信息，防止数据丢失。
                    </div>
                </div>
                
                <!-- 地图切换控件 -->
                <div class="map-switcher-container">
                    <h3 class="map-switcher-title"><i class="fas fa-map"></i> 地图切换</h3>
                    <div class="map-switcher-buttons">
                        <button class="map-switch-btn active" data-map="amap">
                            <i class="fas fa-map"></i> 高德地图
                        </button>
                        <button class="map-switch-btn" data-map="osm">
                            <i class="fas fa-globe-asia"></i> OpenStreetMap
                        </button>
                        <button class="map-switch-btn" data-map="arcgis">
                            <i class="fas fa-satellite"></i> ArcGIS卫星图
                        </button>
                    </div>
                </div>
                
                <div class="legend">
                    <div class="legend-item">
                        <div class="legend-color" style="background-color: #FFD700;"></div>
                        <span>直营店</span>
                    </div>
                    <div class="legend-item">
                        <div class="legend-color" style="background-color: #4CAF50;"></div>
                        <span>云连锁</span>
                    </div>
                    <div class="legend-item">
                        <div class="legend-color" style="background-color: #2196F3;"></div>
                        <span>加盟店</span>
                    </div>
                </div>
                
                <div class="search-box">
                    <input type="text" id="search-input" placeholder="输入门店名称、地址或城市...">
                    <button id="search-btn"><i class="fas fa-search"></i> 搜索</button>
                </div>
            </div>
        </div>
        
        <footer>
            <p>© 2025 长生桐集团 | 门店分布信息系统 | 数据更新时间: <span id="update-time"></span></p>
        </footer>
    </div>

    <!-- 添加门店模态框 -->
    <div class="modal" id="add-store-modal">
        <div class="modal-content">
            <button class="close-modal" id="close-add-store-modal">&times;</button>
            <div class="modal-header">
                <i class="fas fa-store"></i>
                <h3 class="modal-title">添加新门店</h3>
            </div>
            <div class="modal-body">
                <div class="add-store-form">
                    <div class="form-group">
                        <label for="store-name"><i class="fas fa-signature"></i> 门店名称 *</label>
                        <input type="text" id="store-name" placeholder="输入门店名称" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="store-type"><i class="fas fa-store"></i> 门店类型 *</label>
                        <select id="store-type" required>
                            <option value="直营店">直营店</option>
                            <option value="云连锁">云连锁</option>
                            <option value="加盟店">加盟店</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label for="store-province"><i class="fas fa-map-marker-alt"></i> 省份 *</label>
                        <select id="store-province" required>
                            <!-- 省份将通过JavaScript动态生成 -->
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label for="store-city"><i class="fas fa-city"></i> 城市 *</label>
                        <input type="text" id="store-city" placeholder="输入城市名称" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="store-address"><i class="fas fa-map-pin"></i> 详细地址 *</label>
                        <input type="text" id="store-address" placeholder="输入详细地址" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="store-manager"><i class="fas fa-user"></i> 店长姓名 *</label>
                        <input type="text" id="store-manager" placeholder="输入店长姓名" required>
                    </div>
                    
                    <div class="form-group optional-field">
                        <label for="store-phone"><i class="fas fa-phone"></i> 联系电话</label>
                        <input type="text" id="store-phone" placeholder="输入联系电话">
                    </div>
                    
                    <div class="form-group optional-field">
                        <label for="store-hours"><i class="fas fa-clock"></i> 营业时间</label>
                        <input type="text" id="store-hours" placeholder="例: 08:00-22:00">
                    </div>
                    
                    <div class="form-group">
                        <label for="store-lat"><i class="fas fa-location-dot"></i> 纬度 *</label>
                        <input type="number" id="store-lat" step="any" placeholder="输入纬度" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="store-lng"><i class="fas fa-location-dot"></i> 经度 *</label>
                        <input type="number" id="store-lng" step="any" placeholder="输入经度" required>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="modal-btn cancel" id="cancel-add-store">取消</button>
                <button class="modal-btn confirm" id="confirm-add-store">添加门店</button>
            </div>
        </div>
    </div>
    
    <!-- 编辑门店模态框 -->
    <div class="modal" id="edit-store-modal">
        <div class="modal-content">
            <button class="close-modal" id="close-edit-store-modal">&times;</button>
            <div class="modal-header">
                <i class="fas fa-store"></i>
                <h3 class="modal-title">修改门店信息</h3>
            </div>
            <div class="modal-body">
                <div class="add-store-form">
                    <input type="hidden" id="edit-store-id">
                    <div class="form-group">
                        <label for="edit-store-name"><i class="fas fa-signature"></i> 门店名称 *</label>
                        <input type="text" id="edit-store-name" placeholder="输入门店名称" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="edit-store-type"><i class="fas fa-store"></i> 门店类型 *</label>
                        <select id="edit-store-type" required>
                            <option value="直营店">直营店</option>
                            <option value="康养中心">康养中心</option>
                            <option value="加盟店">加盟店</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label for="edit-store-province"><i class="fas fa-map-marker-alt"></i> 省份 *</label>
                        <select id="edit-store-province" required>
                            <!-- 省份将通过JavaScript动态生成 -->
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label for="edit-store-city"><i class="fas fa-city"></i> 城市 *</label>
                        <input type="text" id="edit-store-city" placeholder="输入城市名称" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="edit-store-address"><i class="fas fa-map-pin"></i> 详细地址 *</label>
                        <input type="text" id="edit-store-address" placeholder="输入详细地址" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="edit-store-manager"><i class="fas fa-user"></i> 店长姓名 *</label>
                        <input type="text" id="edit-store-manager" placeholder="输入店长姓名" required>
                    </div>
                    
                    <div class="form-group optional-field">
                        <label for="edit-store-phone"><i class="fas fa-phone"></i> 联系电话</label>
                        <input type="text" id="edit-store-phone" placeholder="输入联系电话">
                    </div>
                    
                    <div class="form-group optional-field">
                        <label for="edit-store-hours"><i class="fas fa-clock"></i> 营业时间</label>
                        <input type="text" id="edit-store-hours" placeholder="例: 08:00-22:00">
                    </div>
                    
                    <div class="form-group">
                        <label for="edit-store-lat"><i class="fas fa-location-dot"></i> 纬度 *</label>
                        <input type="number" id="edit-store-lat" step="any" placeholder="输入纬度" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="edit-store-lng"><i class="fas fa-location-dot"></i> 经度 *</label>
                        <input type="number" id="edit-store-lng" step="any" placeholder="输入经度" required>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="modal-btn cancel" id="cancel-edit-store">取消</button>
                <button class="modal-btn confirm" id="confirm-edit-store">保存修改</button>
            </div>
        </div>
    </div>

    <!-- 导入数据模态框 -->
    <div class="modal" id="import-modal">
        <div class="modal-content">
            <button class="close-modal" id="close-import-modal">&times;</button>
            <div class="modal-header">
                <i class="fas fa-file-import"></i>
                <h3 class="modal-title">导入门店数据</h3>
            </div>
            <div class="modal-body">
                <p>请选择门店数据的JSON文件：</p>
                
                <div class="file-import" id="file-drop-area">
                    <i class="fas fa-file-upload"></i>
                    <div class="file-import-text">点击或拖放JSON文件到此处</div>
                    <p>支持门店数据JSON文件导入</p>
                    <div class="file-name" id="file-name">未选择文件</div>
                    <input type="file" id="file-input" class="file-input" accept=".json">
                </div>
            </div>
            <div class="modal-footer">
                <button class="modal-btn cancel" id="cancel-import">取消</button>
                <button class="modal-btn confirm" id="confirm-import">确认导入</button>
            </div>
        </div>
    </div>

    <script>
        // 中国所有省份列表
        const provinces = [
            "北京市", "天津市", "河北省", "山西省", "内蒙古自治区", 
            "辽宁省", "吉林省", "黑龙江省", "上海市", "江苏省", 
            "浙江省", "安徽省", "福建省", "江西省", "山东省", 
            "河南省", "湖北省", "湖南省", "广东省", "广西壮族自治区", 
            "海南省", "重庆市", "四川省", "贵州省", "云南省", 
            "西藏自治区", "陕西省", "甘肃省", "青海省", "宁夏回族自治区", 
            "新疆维吾尔自治区", "台湾省", "香港特别行政区", "澳门特别行政区"
        ];
        
        // 省份颜色映射
        const provinceColors = {
            "北京市": "#FF6384",
            "天津市": "#36A2EB",
            "河北省": "#FFCE56",
            "山西省": "#4BC0C0",
            "内蒙古自治区": "#9966FF",
            "辽宁省": "#FF9F40",
            "吉林省": "#8AC926",
            "黑龙江省": "#1982C4",
            "上海市": "#6A4C93",
            "江苏省": "#F15BB5",
            "浙江省": "#9B5DE5",
            "安徽省": "#00BBF9",
            "福建省": "#00F5D4",
            "江西省": "#FEE440",
            "山东省": "#00F5D4",
            "河南省": "#FF6B6B",
            "湖北省": "#4ECDC4",
            "湖南省": "#FF9F1C",
            "广东省": "#2EC4B6",
            "广西壮族自治区": "#E71D36",
            "海南省": "#FF9F1C",
            "重庆市": "#6A4C93",
            "四川省": "#1982C4",
            "贵州省": "#8AC926",
            "云南省": "#F15BB5",
            "西藏自治区": "#36A2EB",
            "陕西省": "#FF6384",
            "甘肃省": "#FFCE56",
            "青海省": "#4BC0C0",
            "宁夏回族自治区": "#9966FF",
            "新疆维吾尔自治区": "#FF9F40",
            "台湾省": "#00BBF9",
            "香港特别行政区": "#FEE440",
            "澳门特别行政区": "#6A4C93"
        };
        
        // 高德地图API密钥管理
        const API_KEY_STORAGE_KEY = 'amap_api_key';
        let amapApiKey = localStorage.getItem(API_KEY_STORAGE_KEY) || 'a5c0d2d1d4c0e7e8b8f9a0d3c8b1d8e5';
        
        // 门店数据存储键名
        const STORE_DATA_KEY = 'changshengtong_stores';
        
        // 地图服务提供者
        const mapProviders = {
            amap: {
                name: "高德地图",
                url: `https://webst0{s}.is.autonavi.com/appmaptile?style=7&x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1${amapApiKey ? '&key=' + amapApiKey : ''}`,
                subdomains: ['1', '2', '3', '4'],
                maxZoom: 18,
                attribution: '高德地图'
            },
            osm: {
                name: "OpenStreetMap",
                url: "https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png",
                subdomains: ['a', 'b', 'c'],
                maxZoom: 19,
                attribution: '&copy; OpenStreetMap France | &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            },
            arcgis: {
                name: "ArcGIS卫星图",
                url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
                subdomains: [],
                maxZoom: 17,
                attribution: 'Tiles &copy; Esri'
            }
        };
        
        // 确保在DOM完全加载后再初始化地图
        document.addEventListener('DOMContentLoaded', function() {
            // 设置更新时间
            const now = new Date();
            document.getElementById('update-time').textContent = 
                `${now.getFullYear()}-${String(now.getMonth()+1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ` +
                `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`;
            
            // 折叠面板功能
            document.getElementById('api-toggle').addEventListener('click', function() {
                const content = document.getElementById('api-content');
                content.classList.toggle('active');
            });
            
            // 点击其他地方关闭折叠面板
            document.addEventListener('click', function(e) {
                if (!e.target.closest('.api-collapse')) {
                    document.getElementById('api-content').classList.remove('active');
                }
            });
            
            // 创建地图实例 - 移动端默认缩放级别为4
            let isMobile = window.matchMedia("(max-width: 767px)").matches;
            let defaultZoom = isMobile ? 4 : 5;
            
            let map = L.map('map', {
                zoomControl: false,
                attributionControl: false,
                tap: true,
                touchZoom: true,
                dragging: true,
                scrollWheelZoom: true,
                doubleClickZoom: true,
                zoomAnimation: true,
                wheelPxPerZoomLevel: 60
            }).setView([35, 105], defaultZoom);
            
            // 当前使用的地图图层
            let currentMapLayer = null;
            
            // 初始化地图图层
            function initMapLayer(providerKey) {
                const provider = mapProviders[providerKey];
                
                // 移除旧图层
                if (currentMapLayer) {
                    map.removeLayer(currentMapLayer);
                }
                
                // 创建新图层
                currentMapLayer = L.tileLayer(provider.url, {
                    subdomains: provider.subdomains,
                    maxZoom: provider.maxZoom,
                    attribution: provider.attribution
                }).addTo(map);
                
                // 更新按钮状态
                document.querySelectorAll('.map-switch-btn').forEach(btn => {
                    btn.classList.remove('active');
                });
                document.querySelector(`.map-switch-btn[data-map="${providerKey}"]`).classList.add('active');
                
                // 更新地图标题
                document.getElementById('map-title').textContent = `长生桐门店分布 - ${provider.name}`;
                document.getElementById('mobile-map-title').textContent = `长生桐门店分布 - ${provider.name}`;
            }
            
            // 默认使用高德地图
            initMapLayer('amap');
            
            // 添加缩放控件
            L.control.zoom({
                position: 'bottomright',
                zoomInTitle: '放大',
                zoomOutTitle: '缩小'
            }).addTo(map);
            
            // 门店数据 - 初始为空
            let stores = [];
            let selectedStoreId = null; // 当前选中的门店ID
            let markers = [];
            
            // 填充省份选择器
            function populateProvinces() {
                const store1Province = document.getElementById('store1-province');
                const store2Province = document.getElementById('store2-province');
                const storeProvince = document.getElementById('store-province');
                const editStoreProvince = document.getElementById('edit-store-province');
                
                // 清空现有选项
                store1Province.innerHTML = '<option value="">-- 选择省份 --</option>';
                store2Province.innerHTML = '<option value="">-- 选择省份 --</option>';
                storeProvince.innerHTML = '<option value="">-- 选择省份 --</option>';
                editStoreProvince.innerHTML = '<option value="">-- 选择省份 --</option>';
                
                // 添加所有省份选项
                provinces.forEach(province => {
                    const option1 = new Option(province, province);
                    const option2 = new Option(province, province);
                    const option = new Option(province, province);
                    const editOption = new Option(province, province);
                    store1Province.add(option1);
                    store2Province.add(option2);
                    storeProvince.add(option);
                    editStoreProvince.add(editOption);
                });
            }
            
            // 保存门店数据到本地存储
            function saveStoresToLocalStorage() {
                localStorage.setItem(STORE_DATA_KEY, JSON.stringify(stores));
            }
            
            // 从本地存储加载门店数据
            function loadStoresFromLocalStorage() {
                const savedData = localStorage.getItem(STORE_DATA_KEY);
                return savedData ? JSON.parse(savedData) : null;
            }
            
            // 加载真实门店数据
            function loadRealStoreData() {
                // 尝试从本地存储加载数据
                const savedStores = loadStoresFromLocalStorage();
                
                if (savedStores) {
                    stores = savedStores;
                } else {
                    // 如果没有本地数据，则使用初始数据
                    stores = [
                          {
    "id": 1,
    "name": "长生桐社区康养之家（陈州商城）",
    "type": "加盟店",
    "lat": 33.729559,
    "lng": 114.876101,
    "address": "淮阳区陈州商城北8区35号",
    "province": "河南省",
    "city": "周口市",
    "phone": "17739329708"
  },
  {
    "id": 2,
    "name": "长生桐康养之家",
    "type": "加盟店",
    "lat": 33.774482,
    "lng": 115.021213,
    "address": "淮阳葛店乡葛店行政村小潘庄",
    "province": "河南省",
    "city": "周口市",
    "phone": "1538309978"
  },
  {
    "id": 3,
    "name": "碧斯美容会所",
    "type": "康养中心",
    "lat": 33.750717,
    "lng": 114.865247,
    "address": "淮阳区朝祖大道五彩社区南门口",
    "province": "河南省",
    "city": "周口市",
    "phone": "18625705688"
  },
  {
    "id": 4,
    "name": "长生桐社区康养之家",
    "type": "加盟店",
    "lat": 33.524309,
    "lng": 114.948007,
    "address": "淮阳朱集朱楼镇",
    "province": "河南省",
    "city": "周口市",
    "phone": "15936095528"
  },
  {
    "id": 5,
    "name": "汉禾婌颜美容养生馆",
    "type": "康养中心",
    "lat": 33.730594,
    "lng": 114.860279,
    "address": "淮阳育德路一中小高层",
    "province": "河南省",
    "city": "周口市",
    "phone": "17538059698"
  },
  {
    "id": 6,
    "name": "社区康养之家",
    "type": "加盟店",
    "lat": 33.727055,
    "lng": 114.771202,
    "address": "淮阳殷古洞村",
    "province": "河南省",
    "city": "周口市",
    "phone": "17822105909"
  },
  {
    "id": 7,
    "name": "魏苹美容会所",
    "type": "康养中心",
    "lat": 33.730623,
    "lng": 114.858414,
    "address": "淮阳县育德路和明信路交叉口东南角",
    "province": "河南省",
    "city": "周口市",
    "phone": "13183221456"
  },
  {
    "id": 8,
    "name": "未知",
    "type": "康养中心",
    "lat": 34.731244,
    "lng": 113.665633,
    "address": "二七区苗圃西街苗圃社区党群办",
    "province": "河南省",
    "city": "郑州市",
    "phone": "15649262882"
  },
  {
    "id": 9,
    "name": "长生桐社区康养之家",
    "type": "直营店",
    "lat": 34.088783,
    "lng": 115.320269,
    "address": "和谐大街中南海花园",
    "province": "河南省",
    "city": "商丘市"
  },
  {
    "id": 10,
    "name": "长生桐康养之家",
    "type": "加盟店",
    "lat": 34.014517,
    "lng": 115.312736,
    "address": "柘城县张桥乡老王集村",
    "province": "河南省",
    "city": "商丘市"
  },
  {
    "id": 11,
    "name": "金川秀化妆品",
    "type": "加盟店",
    "lat": 34.10755,
    "lng": 115.268518,
    "address": "柘城双河区双河街道中李楼",
    "province": "河南省",
    "city": "商丘市"
  },
  {
    "id": 12,
    "name": "玉瘦坊",
    "type": "加盟店",
    "lat": 34.415165,
    "lng": 115.656358,
    "address": "柘城县柘城惠济豆楼",
    "province": "河南省",
    "city": "商丘市"
  },
  {
    "id": 13,
    "name": "迦南之约",
    "type": "加盟店",
    "lat": 34.098659,
    "lng": 115.224772,
    "address": "柘城县岗王镇",
    "province": "河南省",
    "city": "商丘市"
  },
  {
    "id": 14,
    "name": "福羽金堂",
    "type": "加盟店",
    "lat": 34.074801,
    "lng": 115.296493,
    "address": "柘城县城关镇中原西路 一实小向西10米",
    "province": "河南省",
    "city": "商丘市"
  },
  {
    "id": 15,
    "name": "花芊黛美妆店",
    "type": "加盟店",
    "lat": 34.152366,
    "lng": 115.698391,
    "address": "睢阳区坞墙镇清华街十字路口向西五十米路北",
    "province": "河南省",
    "city": "商丘市"
  },
  {
    "id": 16,
    "name": "长生桐孵化基地",
    "type": "加盟店",
    "lat": 34.068634,
    "lng": 115.315175,
    "address": "柘城县春水街道黄山路南头172号",
    "province": "河南省",
    "city": "商丘市"
  },
  {
    "id": 17,
    "name": "媗菲美容养生会店",
    "type": "加盟店",
    "lat": 34.07083,
    "lng": 115.303804,
    "address": "柘城县城关镇民主西路亚当夏娃",
    "province": "河南省",
    "city": "商丘市"
  },
  {
    "id": 18,
    "name": "长生桐社区康养之家",
    "type": "加盟店",
    "lat": 34.048905,
    "lng": 115.396338,
    "address": "柘城县陈青集镇",
    "province": "河南省",
    "city": "商丘市"
  },
  {
    "id": 19,
    "name": "长生桐社区康养之家",
    "type": "加盟店",
    "lat": 34.203428,
    "lng": 115.305617,
    "address": "柘城县远襄镇鑫世纪购物广场",
    "province": "河南省",
    "city": "商丘市",
    "manager": "崔丽廷",
    "phone": "",
    "hours": ""
  },
  {
    "id": 20,
    "name": "长生桐社区康养之家",
    "type": "加盟店",
    "lat": 34.081939,
    "lng": 115.332739,
    "address": "柘城县浦东街道英伦名邸小区",
    "province": "河南省",
    "city": "商丘市"
  },
  {
    "id": 21,
    "name": "健康管理中心",
    "type": "加盟店",
    "lat": 30.662571,
    "lng": 114.171076,
    "address": "东西湖区恒大城二期",
    "province": "湖北省",
    "city": "武汉市"
  },
  {
    "id": 22,
    "name": "晓雅护肤",
    "type": "加盟店",
    "lat": 35.23935895,
    "lng": 115.5169871,
    "address": "曹县楼庄乡",
    "province": "山东省",
    "city": "菏泽市"
  },
  {
    "id": 23,
    "name": "晓雅护肤",
    "type": "加盟店",
    "lat": 33.08624,
    "lng": 107.040384,
    "address": "汉台区前进路椰岛广场东巷",
    "province": "陕西省",
    "city": "汉中市",
    "phone": "18909160512"
  },
  {
    "id": 24,
    "name": "陌杏皮肤管理",
    "type": "加盟店",
    "lat": 30.235732,
    "lng": 104.090831,
    "address": "仁寿县视高街道奋勇社区家园印象",
    "province": "四川省",
    "city": "眉山市",
    "phone": "15108413391"
  },
  {
    "id": 25,
    "name": "长生桐社区康养之家",
    "type": "加盟店",
    "lat": 31.009206,
    "lng": 121.232192,
    "address": "岳阳街道中山二路125弄25号",
    "province": "上海市",
    "city": "松江区",
    "phone": "13585844414",
    "manager": "沐沐",
    "hours": ""
  },
  {
    "id": 26,
    "name": "长生桐社区康养之家",
    "type": "加盟店",
    "lat": 29.80569034,
    "lng": 120.5991734,
    "address": "新昌县康福路543号",
    "province": "浙江省",
    "city": "新昌县",
    "phone": "17858127333"
  },
  {
    "id": 27,
    "name": "蔡美红店中店",
    "type": "加盟店",
    "lat": 32.169885,
    "lng": 120.026102,
    "address": "鼓楼东路88号艺新烽养生中心",
    "province": "江苏省",
    "city": "泰兴市",
    "phone": "18936837035"
  },
  {
    "id": 28,
    "name": "长生桐康养之家(马军营店)",
    "type": "加盟店",
    "lat": 36.741456,
    "lng": 114.831263,
    "address": "马军营三村村民委员会西北约160米",
    "province": "河北省",
    "city": "邯郸市",
    "phone": "15027978081",
    "manager": "邢丽彩",
    "hours": ""
  },
  {
    "id": 29,
    "name": "长生桐康养之家(西兆通店)",
    "type": "云连锁",
    "lat": 38.066853,
    "lng": 114.601743,
    "address": "西兆通村富强路四层楼1号楼102号",
    "province": "河北省",
    "city": "石家庄市",
    "manager": "江彦蕊",
    "phone": "15831958079"
  },
  {
    "id": 30,
    "name": "七彩四叶草长生桐康养之家(盛世长安店)",
    "type": "云连锁",
    "lat": 38.056533,
    "lng": 114.550642,
    "address": "和平东路313号盛世长安13-3-101",
    "province": "河北省",
    "city": "石家庄市",
    "manager": "毕丽娟",
    "phone": "18633892296"
  },
  {
    "id": 31,
    "name": "长生桐康养之家(金都乾城店)",
    "type": "云连锁",
    "lat": 35.94487579,
    "lng": 114.35011844,
    "address": "金都乾城小区(3-8)一单元216号商铺",
    "province": "河北省",
    "city": "安阳市",
    "manager": "范丽芹",
    "phone": "13460896614"
  },
  {
    "id": 32,
    "name": "长生桐康养之家(嘉苑二区店)",
    "type": "云连锁",
    "lat": 37.977597,
    "lng": 114.551551,
    "address": "方村嘉苑二区7号楼一单元101",
    "province": "河北省",
    "city": "石家庄市",
    "manager": "刘丽辉",
    "phone": "13230171402"
  },
  {
    "id": 33,
    "name": "长生桐康养之家(商业北街店)",
    "type": "云连锁",
    "lat": 38.524699,
    "lng": 114.989523,
    "address": "商业北街十三衣三楼",
    "province": "河北省",
    "city": "保定市",
    "manager": "申伟",
    "phone": "15733129399"
  },
  {
    "id": 34,
    "name": "长生桐桦之莉科技美肤头疗养生店",
    "type": "云连锁",
    "lat": 23.296346,
    "lng": 116.186604,
    "address": "流沙东街道新坛村后壁园民楼局第6栋2号",
    "province": "广东省",
    "city": "普宁市",
    "manager": "李世弥",
    "phone": "15917993218"
  },
  {
    "id": 35,
    "name": "长生桐艾依娜·美容会所",
    "type": "云连锁",
    "lat": 33.617788,
    "lng": 114.643437,
    "address": "圈神庙街100号（人民商场后面新天地南门）",
    "province": "河南省",
    "city": "周口市",
    "manager": "谢念",
    "phone": "13383942123"
  },
  {
    "id": 36,
    "name": "长生桐溪水养生会所",
    "type": "云连锁",
    "lat": 38.522257,
    "lng": 102.171723,
    "address": "世纪金都南门左侧16号商铺",
    "province": "甘肃省",
    "city": "金昌市",
    "manager": "张燕萍",
    "phone": "15095453885"
  },
  {
    "id": 37,
    "name": "长生桐康养之家(大华路店)",
    "type": "加盟店",
    "lat": 30.58715,
    "lng": 104.194723,
    "address": "大华路170号",
    "province": "四川省",
    "city": "成都市",
    "manager": "李思漫",
    "phone": "15828496134"
  },
  {
    "id": 38,
    "name": "长生桐康养之家(五桐路店)",
    "type": "加盟店",
    "lat": 30.632282,
    "lng": 103.951255,
    "address": "九江街道五桐路20号8栋1层108号",
    "province": "四川省",
    "city": "成都市",
    "manager": "暂无",
    "phone": "13551158532"
  },
  {
    "id": 39,
    "name": "长生桐康养之家(殷古洞村店)",
    "type": "云连锁",
    "lat": 33.727055,
    "lng": 114.771202,
    "address": "郑集乡殷古洞村179号",
    "province": "河南省",
    "city": "周口市",
    "manager": "袁素梅",
    "phone": "17822105909"
  },
  {
    "id": 40,
    "name": "长生桐康养之家(红旗大厦店)",
    "type": "云连锁",
    "lat": 34.515837,
    "lng": 112.187963,
    "address": "兴宜街道红旗中路红旗大厦2号楼402室",
    "province": "河南省",
    "city": "洛阳市",
    "manager": "崔淑婷",
    "phone": "15136386521"
  },
  {
    "id": 41,
    "name": "长生桐康养之家(柘玄路店)",
    "type": "加盟店",
    "lat": 34.010634,
    "lng": 115.314421,
    "address": "张桥乡老王集柘玄路3号",
    "province": "河南省",
    "city": "商丘市",
    "manager": "暂无",
    "phone": "18537052636"
  },
  {
    "id": 42,
    "name": "长生桐康养之家(家园家居国际印象店)",
    "type": "加盟店",
    "lat": 30.236103,
    "lng": 104.090726,
    "address": "视高街道奋勇社区同心一街二段32号(家园佳居国际印象)13幢1楼2号",
    "province": "四川省",
    "city": "眉山市",
    "manager": "暂无",
    "phone": "15108413391"
  },
  {
    "id": 43,
    "name": "长生桐康养之家(豫一路店)",
    "type": "加盟店",
    "lat": 34.667631,
    "lng": 113.764606,
    "address": "南曹乡豫一路16号(张仲景大药房旁)",
    "province": "河南省",
    "city": "郑州市",
    "manager": "酒银丽",
    "phone": "13526787500"
  },
  {
    "id": 44,
    "name": "长生桐康养之家(荆垌市场店)",
    "type": "云连锁",
    "lat": 34.617302,
    "lng": 113.688369,
    "address": "龙湖镇文昌路荆垌市场",
    "province": "河南省",
    "city": "新郑市",
    "manager": "李媛媛",
    "phone": "17703860512"
  },
  {
    "id": 45,
    "name": "长生桐康养之家(英伦名邸店)",
    "type": "加盟店",
    "lat": 34.081651,
    "lng": 115.332364,
    "address": "浦东街道英伦名邸小区",
    "province": "河南省",
    "city": "商丘市",
    "manager": "暂无",
    "phone": "15137016187"
  },
  {
    "id": 46,
    "name": "长生桐康养之家(环城二路店)",
    "type": "加盟店",
    "lat": 23.708611,
    "lng": 113.025282,
    "address": "环城二路三号第一栋首层第8卡",
    "province": "广东省",
    "city": "清远市",
    "manager": "赖远明",
    "phone": "13585844414"
  },
  {
    "id": 47,
    "name": "长生桐康养之家(吉利店)",
    "type": "云连锁",
    "lat": 34.899212,
    "lng": 112.567497,
    "address": "西杨社区福林手机店二楼",
    "province": "河南省",
    "city": "洛阳市",
    "manager": "暂无",
    "phone": "15978680518"
  },
  {
    "id": 48,
    "name": "俏娇人长生桐美容养生馆",
    "type": "云连锁",
    "lat": 36.477579,
    "lng": 114.43852,
    "address": "鑫和小区北门旁",
    "province": "河北省",
    "city": "邯郸市",
    "manager": "耿红芳",
    "phone": "13231032226"
  },
  {
    "id": 49,
    "name": "长生桐康养之家(刘庄花园店)",
    "type": "加盟店",
    "lat": 36.610027,
    "lng": 114.122281,
    "address": "磁山镇刘庄村刘庄花园西南侧350米(卫生所旁)",
    "province": "河北省",
    "city": "邯郸市",
    "manager": "暂无",
    "phone": "15033853453"
  },
  {
    "id": 50,
    "name": "长生桐沐悦美容养生",
    "type": "加盟店",
    "lat": 36.452718,
    "lng": 114.669323,
    "address": "成安镇平安北大街锦绣名都小区9号楼底商2-C-5",
    "province": "河北省",
    "city": "邯郸市",
    "manager": "暂无",
    "phone": "17334135443"
  },
  {
    "id": 51,
    "name": "长生桐康养之家(坞墙镇店)",
    "type": "加盟店",
    "lat": 34.152366,
    "lng": 115.698391,
    "address": "坞墙乡蔡园清华街201号(柳州螺蛳粉店旁)",
    "province": "河南省",
    "city": "商丘市",
    "manager": "李曼丽",
    "phone": "17838878399"
  },
  {
    "id": 52,
    "name": "长生桐日娇颜美容店",
    "type": "云连锁",
    "lat": 36.554053,
    "lng": 114.536889,
    "address": "南堡乡大树康城516-4号",
    "province": "河北省",
    "city": "邯郸市",
    "manager": "刘芳芳",
    "phone": "15227989141"
  },
  {
    "id": 53,
    "name": "长生桐康养之家(留村店)",
    "type": "云连锁",
    "lat": 36.954839,
    "lng": 114.551868,
    "address": "经济开发区留村街道办事处商贸东街171号-1(筋骨康复中心对面)",
    "province": "河北省",
    "city": "邢台市",
    "manager": "红霞",
    "phone": "15930940330"
  },
  {
    "id": 54,
    "name": "长生桐康养之家(西关街店)",
    "type": "加盟店",
    "lat": 32.983455,
    "lng": 110.423823,
    "address": "城关镇西关街F区108号",
    "province": "湖北省",
    "city": "十堰市",
    "manager": "暂无",
    "phone": "17363357267"
  },
  {
    "id": 55,
    "name": "长生桐康养孵化基地(雪枫街道店)",
    "type": "加盟店",
    "lat": 34.105634,
    "lng": 116.301389,
    "address": "雪枫街道市场路119号",
    "province": "河南省",
    "city": "商丘市",
    "manager": "暂无",
    "phone": "18238080869"
  },
  {
    "id": 56,
    "name": "长生桐拼康康养之家",
    "type": "加盟店",
    "lat": 29.99154,
    "lng": 104.149616,
    "address": "文林街道陵州路一段428号",
    "province": "四川省",
    "city": "眉山市",
    "manager": "暂无",
    "phone": "18981421344"
  },
  {
    "id": 57,
    "name": "长生桐康养之家(升龙城一号院店)",
    "type": "云连锁",
    "lat": 34.727753,
    "lng": 113.628894,
    "address": "淮河路街道嵩山南路升龙城1号院2号楼",
    "province": "河南省",
    "city": "郑州市",
    "manager": "玳宁",
    "phone": "19337882268"
  },
  {
    "id": 58,
    "name": "长生桐康养之家(学苑西路店)",
    "type": "加盟店",
    "lat": 34.097693,
    "lng": 115.294374,
    "address": "学苑西路建业连盟新城三期东门11-103号商铺",
    "province": "河南省",
    "city": "商丘市",
    "manager": "陈杰",
    "phone": "15937099282"
  }
                    ];
                    
                    // 保存初始数据到本地存储
                    saveStoresToLocalStorage();
                }
                
                renderMapMarkers();
                generateCountryStats();
                updateStoreSelects();
                updateTotalStores();
                renderProvinceChart();
                
                // 隐藏加载动画
                document.getElementById('loading').style.display = 'none';
            }
            
            // 计算两个坐标之间的距离（Haversine公式）
            function getDistance(lat1, lon1, lat2, lon2) {
                const R = 6371; // 地球半径（公里）
                const dLat = (lat2 - lat1) * Math.PI / 180;
                const dLon = (lon2 - lon1) * Math.PI / 180;
                const a = 
                    Math.sin(dLat/2) * Math.sin(dLat/2) +
                    Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * 
                    Math.sin(dLon/2) * Math.sin(dLon/2);
                const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
                return R * c;
            }
            
            // 在地图上绘制两点间的距离线和标签
            function drawDistanceLine(store1, store2) {
                // 清除之前的距离线和标签
                document.querySelectorAll('.distance-line, .distance-label').forEach(el => el.remove());
                
                // 计算中点位置
                const midLat = (store1.lat + store2.lat) / 2;
                const midLng = (store1.lng + store2.lng) / 2;
                
                // 创建SVG线
                const line = document.createElementNS("http://www.w3.org/2000/svg", "svg");
                line.setAttribute("class", "distance-line");
                line.style.position = "absolute";
                line.style.width = "100%";
                line.style.height = "100%";
                line.style.top = "0";
                line.style.left = "0";
                line.style.pointerEvents = "none";
                
                const point1 = map.latLngToContainerPoint([store1.lat, store1.lng]);
                const point2 = map.latLngToContainerPoint([store2.lat, store2.lng]);
                
                const lineElement = document.createElementNS("http://www.w3.org/2000/svg", "line");
                lineElement.setAttribute("x1", point1.x);
                lineElement.setAttribute("y1", point1.y);
                lineElement.setAttribute("x2", point2.x);
                lineElement.setAttribute("y2", point2.y);
                lineElement.setAttribute("stroke", "#FFD700");
                lineElement.setAttribute("stroke-width", "3");
                lineElement.setAttribute("stroke-dasharray", "5,5");
                line.appendChild(lineElement);
                
                document.querySelector('.map-container').appendChild(line);
                
                // 创建距离标签
                const midPoint = map.latLngToContainerPoint([midLat, midLng]);
                const distance = getDistance(store1.lat, store1.lng, store2.lat, store2.lng);
                
                const label = document.createElement("div");
                label.className = "distance-label";
                label.textContent = `${distance.toFixed(1)}公里`;
                label.style.left = `${midPoint.x}px`;
                label.style.top = `${midPoint.y}px`;
                
                document.querySelector('.map-container').appendChild(label);
                
                return distance;
            }
            
            // 创建门店标记
            function createStoreMarker(store) {
                // 获取省份颜色
                const color = provinceColors[store.province] || "#FFD700";
                
                // 计算该省份的门店数量
                const provinceCount = stores.filter(s => s.province === store.province).length;
                
                // 根据门店数量计算图标大小（数量越多，图标越小）
                const minSize = 24;
                const maxSize = 48;
                
                // 找到当前所有省份中的最大门店数
                const provinceCounts = stores.reduce((acc, s) => {
                    acc[s.province] = (acc[s.province] || 0) + 1;
                    return acc;
                }, {});
                const maxCount = Math.max(...Object.values(provinceCounts), 1);
                
                // 线性计算大小：数量越多，图标越小
                const size = maxCount === 0 ? maxSize : 
                    minSize + (maxSize - minSize) * (1 - provinceCount / maxCount);
                
                // 计算内圆大小（固定比例）
                const innerSize = Math.max(8, Math.round(size * 0.4));
                
                const icon = L.divIcon({
                    className: 'store-icon',
                    html: `<div style="background-color: ${color}; 
                            width: ${size}px; height: ${size}px; border-radius: 50%; 
                            border: 2px solid white; box-shadow: 0 0 15px rgba(0,0,0,0.6);
                            display: flex; align-items: center; justify-content: center;
                            animation: pulse 2s infinite;">
                            <div style="background: white; width: ${innerSize}px; height: ${innerSize}px; border-radius: 50%;"></div>
                          </div>`,
                    iconSize: [size, size],
                    iconAnchor: [size/2, size/2]
                });
                
                const marker = L.marker([store.lat, store.lng], {icon: icon});
                
                // 弹出窗口内容
                let popupContent = `<h3>${store.name}</h3>`;
                popupContent += `<p><i class="fas fa-store"></i> <strong>门店类型:</strong> ${store.type}</p>`;
                popupContent += `<p><i class="fas fa-map-marker-alt"></i> <strong>所在地区:</strong> ${store.province}, ${store.city}</p>`;
                popupContent += `<p><i class="fas fa-map-pin"></i> ${store.address}</p>`;
                
                // 添加店长姓名
                popupContent += `<p><i class="fas fa-user"></i> <strong>店长:</strong> ${store.manager}</p>`;
                
                if (store.phone) {
                    popupContent += `<p><i class="fas fa-phone"></i> ${store.phone}</p>`;
                }
                
                if (store.hours) {
                    popupContent += `<p><i class="fas fa-clock"></i> ${store.hours}</p>`;
                }
                
                marker.bindPopup(popupContent);
                
                marker.on('click', function() {
                    updateStoreDetails(store);
                    selectedStoreId = store.id;
                    document.getElementById('store-actions').style.display = 'flex';
                });
                
                return marker;
            }
            
            // 更新门店详情
            function updateStoreDetails(store) {
                const detailsContainer = document.getElementById('store-details');
                
                if (!store || !store.name) {
                    detailsContainer.innerHTML = `
                        <h3 class="location-title"><i class="fas fa-map-marker-alt"></i> 点击地图上的标记查看门店详情</h3>
                        <p class="location-detail"><i class="fas fa-info-circle"></i> 请点击地图上的门店标记查看详细信息</p>
                        <div class="store-actions" style="display: none;" id="store-actions">
                            <button class="edit-store-btn" id="edit-store-btn">
                                <i class="fas fa-edit"></i> 修改信息
                            </button>
                            <button class="delete-store-btn" id="delete-store-btn">
                                <i class="fas fa-trash"></i> 删除门店
                            </button>
                        </div>
                    `;
                    return;
                }
                
                let detailsHTML = `<h3 class="location-title"><i class="fas fa-store"></i> ${store.name}</h3>`;
                detailsHTML += `<p class="location-detail"><i class="fas fa-map-marker-alt"></i> 地址: ${store.address}</p>`;
                
                // 添加店长姓名
                detailsHTML += `<p class="location-detail"><i class="fas fa-user"></i> 店长: ${store.manager}</p>`;
                
                if (store.phone) {
                    detailsHTML += `<p class="location-detail"><i class="fas fa-phone"></i> 电话: ${store.phone}</p>`;
                }
                
                if (store.hours) {
                    detailsHTML += `<p class="location-detail"><i class="fas fa-clock"></i> 营业时间: ${store.hours}</p>`;
                }
                
                detailsHTML += `<p class="location-detail"><i class="fas fa-store"></i> 门店类型: ${store.type}</p>`;
                detailsHTML += `<p class="location-detail"><i class="fas fa-map-pin"></i> 地区: ${store.province}, ${store.city}</p>`;
                
                detailsHTML += `<div class="store-actions" id="store-actions">
                    <button class="edit-store-btn" id="edit-store-btn">
                        <i class="fas fa-edit"></i> 修改信息
                    </button>
                    <button class="delete-store-btn" id="delete-store-btn">
                        <i class="fas fa-trash"></i> 删除门店
                    </button>
                </div>`;
                
                detailsContainer.innerHTML = detailsHTML;
                
                // 添加删除事件
                document.getElementById('delete-store-btn').addEventListener('click', function() {
                    if (confirm('确定要删除这个门店吗？')) {
                        stores = stores.filter(s => s.id !== store.id);
                        saveStoresToLocalStorage(); // 保存到本地存储
                        renderMapMarkers();
                        generateCountryStats();
                        updateStoreSelects();
                        updateStoreDetails({});
                        renderProvinceChart();
                    }
                });
                
                // 添加编辑事件
                document.getElementById('edit-store-btn').addEventListener('click', function() {
                    openEditStoreModal(store);
                });
                
                // 高亮显示当前门店标记
                markers.forEach(marker => {
                    const markerEl = marker.getElement();
                    if (markerEl) {
                        markerEl.style.filter = "brightness(0.7)";
                    }
                });
                
                const currentMarker = markers.find(m => m.options.icon.options.html.includes(store.name));
                if (currentMarker) {
                    const markerEl = currentMarker.getElement();
                    if (markerEl) {
                        markerEl.style.filter = "brightness(1.2)";
                        markerEl.style.transform = "scale(1.2)";
                        
                        // 移除之前的高亮效果
                        setTimeout(() => {
                            markerEl.style.transform = "";
                        }, 1000);
                    }
                }
            }
            
            // 打开编辑门店模态框
            function openEditStoreModal(store) {
                document.getElementById('edit-store-id').value = store.id;
                document.getElementById('edit-store-name').value = store.name;
                document.getElementById('edit-store-type').value = store.type;
                document.getElementById('edit-store-province').value = store.province;
                document.getElementById('edit-store-city').value = store.city;
                document.getElementById('edit-store-address').value = store.address;
                document.getElementById('edit-store-manager').value = store.manager;
                document.getElementById('edit-store-phone').value = store.phone || '';
                document.getElementById('edit-store-hours').value = store.hours || '';
                document.getElementById('edit-store-lat').value = store.lat;
                document.getElementById('edit-store-lng').value = store.lng;
                
                document.getElementById('edit-store-modal').style.display = 'flex';
            }
            
            // 渲染地图标记
            function renderMapMarkers() {
                // 清除现有标记
                markers.forEach(marker => map.removeLayer(marker));
                markers = [];
                
                // 添加新标记
                stores.forEach(store => {
                    const marker = createStoreMarker(store);
                    marker.addTo(map);
                    markers.push(marker);
                });
                
                // 更新标题
                document.getElementById('map-title').textContent = "长生桐全国门店分布";
                document.getElementById('mobile-map-title').textContent = "长生桐全国门店分布";
                updateTotalStores();
                
                // 隐藏加载动画
                document.getElementById('loading').style.display = 'none';
            }
            
            // 更新门店总数
            function updateTotalStores() {
                const total = stores.length;
                document.getElementById('total-stores').textContent = total;
                document.getElementById('mobile-total-stores').textContent = total;
            }
            
            // 生成全国门店统计
            function generateCountryStats() {
                const statsContainer = document.getElementById('province-stats');
                statsContainer.innerHTML = '';
                
                if (stores.length === 0) {
                    const statItem = document.createElement('div');
                    statItem.className = 'stat-item';
                    statItem.innerHTML = `<span class="stat-name">暂无门店数据</span><span class="stat-value">0家</span>`;
                    statsContainer.appendChild(statItem);
                    return;
                }
                
                const provinceStats = {};
                stores.forEach(store => {
                    if (!provinceStats[store.province]) {
                        provinceStats[store.province] = 0;
                    }
                    provinceStats[store.province] += 1;
                });
                
                // 按门店数量排序
                const sortedProvinces = Object.entries(provinceStats)
                    .sort((a, b) => b[1] - a[1]);
                
                // 只循环省份，不显示城市
                sortedProvinces.forEach(([province, count]) => {
                    const statItem = document.createElement('div');
                    statItem.className = 'stat-item';
                    statItem.dataset.province = province;
                    statItem.innerHTML = `
                        <span class="stat-name">${province}</span>
                        <span class="stat-value">${count}家</span>
                    `;
                    
                    // 设置省份颜色
                    const color = provinceColors[province] || "#FFD700";
                    statItem.style.borderLeft = `4px solid ${color}`;
                    
                    statsContainer.appendChild(statItem);
                });
                
                // 添加省份筛选功能
                document.querySelectorAll('.stat-item').forEach(item => {
                    item.addEventListener('click', function() {
                        const province = this.dataset.province;
                        
                        // 清除所有标记
                        markers.forEach(marker => map.removeLayer(marker));
                        markers = [];
                        
                        // 添加符合条件的标记
                        stores.forEach(store => {
                            if (store.province === province) {
                                const marker = createStoreMarker(store);
                                marker.addTo(map);
                                markers.push(marker);
                            }
                        });
                        
                        // 更新地图标题
                        document.getElementById('map-title').textContent = `长生桐${province}门店分布`;
                        document.getElementById('mobile-map-title').textContent = `长生桐${province}门店分布`;
                        
                        // 高亮选中的省份
                        document.querySelectorAll('.stat-item').forEach(i => {
                            i.classList.remove('active');
                        });
                        this.classList.add('active');
                        
                        // 调整视图到该省份
                        const provinceStores = stores.filter(s => s.province === province);
                        if (provinceStores.length > 0) {
                            const bounds = L.latLngBounds(provinceStores.map(s => [s.lat, s.lng]));
                            map.fitBounds(bounds, { padding: [50, 50] });
                        }
                    });
                });
            }
            
            // 渲染省份门店数量分布图表
            function renderProvinceChart() {
                const ctx = document.getElementById('province-chart').getContext('2d');
                
                // 统计每个省份的门店数量
                const provinceStats = {};
                stores.forEach(store => {
                    if (!provinceStats[store.province]) {
                        provinceStats[store.province] = 0;
                    }
                    provinceStats[store.province] += 1;
                });
                
                // 按门店数量排序
                const sortedProvinces = Object.entries(provinceStats)
                    .sort((a, b) => b[1] - a[1]);
                
                // 只取前8个省份，其他合并为"其他"
                const topProvinces = sortedProvinces.slice(0, 8);
                const otherCount = sortedProvinces.slice(8).reduce((sum, [, count]) => sum + count, 0);
                
                const labels = topProvinces.map(([province]) => province);
                const data = topProvinces.map(([, count]) => count);
                
                if (otherCount > 0) {
                    labels.push('其他');
                    data.push(otherCount);
                }
                
                const backgroundColors = labels.map(label => 
                    label === '其他' ? '#999999' : (provinceColors[label] || '#FFD700')
                );
                
                // 生成图例
                const legendContainer = document.getElementById('chart-legend');
                legendContainer.innerHTML = '';
                
                labels.forEach((label, index) => {
                    const legendItem = document.createElement('div');
                    legendItem.className = 'chart-legend-item';
                    
                    const colorBox = document.createElement('div');
                    colorBox.className = 'chart-legend-color';
                    colorBox.style.backgroundColor = backgroundColors[index];
                    
                    const text = document.createElement('span');
                    text.textContent = `${label}: ${data[index]}家`;
                    text.style.color = 'white'; // 确保文字为白色
                    
                    legendItem.appendChild(colorBox);
                    legendItem.appendChild(text);
                    legendContainer.appendChild(legendItem);
                });
                
                // 如果已有图表实例，销毁它
                if (window.provinceChart) {
                    window.provinceChart.destroy();
                }
                
                // 创建新图表 - 简化版饼图
                window.provinceChart = new Chart(ctx, {
                    type: 'doughnut',
                    data: {
                        labels: labels,
                        datasets: [{
                            data: data,
                            backgroundColor: backgroundColors,
                            borderColor: backgroundColors.map(color => color.replace('0.7', '1')),
                            borderWidth: 1
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                display: false // 隐藏默认图例
                            },
                            tooltip: {
                                callbacks: {
                                    label: function(context) {
                                        const label = context.label || '';
                                        const value = context.raw || 0;
                                        const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                        const percentage = Math.round((value / total) * 100);
                                        return `${label}: ${value}家 (${percentage}%)`;
                                    }
                                },
                                bodyColor: '#ffffff' // 设置工具提示文字为白色
                            }
                        },
                        cutout: '55%'
                    }
                });
            }
            
            // 更新门店下拉选择框
            function updateStoreSelects() {
                const store1Select = document.getElementById('store1');
                const store2Select = document.getElementById('store2');
                
                // 清空现有选项（保留第一个选项）
                while (store1Select.options.length > 1) {
                    store1Select.remove(1);
                }
                while (store2Select.options.length > 1) {
                    store2Select.remove(1);
                }
                
                // 添加新门店
                stores.forEach(store => {
                    const option1 = new Option(store.name, store.id);
                    const option2 = new Option(store.name, store.id);
                    store1Select.add(option1);
                    store2Select.add(option2);
                });
            }
            
            // 填充省份选择器
            populateProvinces();
            
            // 搜索功能
            document.getElementById('search-btn').addEventListener('click', function() {
                const keyword = document.getElementById('search-input').value.trim();
                if (!keyword) return;
                
                const foundStore = stores.find(store => 
                    store.name.includes(keyword) || 
                    store.address.includes(keyword) ||
                    store.city.includes(keyword) ||
                    store.province.includes(keyword)
                );
                
                if (foundStore) {
                    map.setView([foundStore.lat, foundStore.lng], 14);
                    
                    const marker = markers.find(m => m.options.icon.options.html.includes(foundStore.name));
                    if (marker) {
                        marker.openPopup();
                        updateStoreDetails(foundStore);
                        selectedStoreId = foundStore.id;
                        document.getElementById('store-actions').style.display = 'flex';
                    }
                } else {
                    alert(`未找到包含"${keyword}"的门店`);
                }
            });
            
            // 距离计算功能
            document.getElementById('calculate-btn').addEventListener('click', function() {
                const store1Id = document.getElementById('store1').value;
                const store2Id = document.getElementById('store2').value;
                
                if (!store1Id || !store2Id) {
                    alert("请选择两家门店进行计算");
                    return;
                }
                
                if (store1Id === store2Id) {
                    alert("请选择两家不同的门店");
                    return;
                }
                
                const store1 = stores.find(s => s.id == store1Id);
                const store2 = stores.find(s => s.id == store2Id);
                
                if (!store1 || !store2) {
                    alert("门店数据错误，请重试");
                    return;
                }
                
                // 计算距离并绘制连线
                const distance = drawDistanceLine(store1, store2);
                
                // 更新结果面板
                document.getElementById('distance-result').innerHTML = `
                    <div>${store1.name} 与 ${store2.name}</div>
                    <div style="font-size: 1.5rem; margin-top: 10px;">直线距离: ${distance.toFixed(1)} 公里</div>
                `;
                
                // 调整地图视图以显示两家门店
                const bounds = L.latLngBounds(
                    [store1.lat, store1.lng],
                    [store2.lat, store2.lng]
                );
                map.fitBounds(bounds, { padding: [50, 50] });
            });
            
            // 重置地图功能
            document.getElementById('reset-btn').addEventListener('click', function() {
                map.setView([35, 105], defaultZoom);
                document.getElementById('map-title').textContent = "长生桐全国门店分布";
                document.getElementById('mobile-map-title').textContent = "长生桐全国门店分布";
                document.querySelectorAll('.distance-line, .distance-label').forEach(el => el.remove());
                document.getElementById('distance-result').textContent = "请选择两家门店进行计算";
                document.getElementById('store1').value = "";
                document.getElementById('store2').value = "";
                document.getElementById('store1-province').value = "";
                document.getElementById('store2-province').value = "";
                document.getElementById('store-actions').style.display = 'none';
                
                // 重置省份筛选
                document.querySelectorAll('.stat-item').forEach(i => {
                    i.classList.remove('active');
                });
                
                // 重新渲染所有标记
                renderMapMarkers();
            });
            
            // 添加自定义缩放控件
            const zoomHome = L.Control.extend({
                options: {
                    position: 'bottomright'
                },
                
                onAdd: function(map) {
                    const container = L.DomUtil.create('div', 'leaflet-bar leaflet-control');
                    const button = L.DomUtil.create('a', '', container);
                    button.innerHTML = '<i class="fas fa-home"></i>';
                    button.href = '#';
                    button.title = '重置全国视图';
                    button.style.fontSize = '1.3rem';
                    button.style.padding = '10px 15px';
                    button.style.display = 'flex';
                    button.style.alignItems = 'center';
                    button.style.justifyContent = 'center';
                    button.style.background = 'rgba(0, 0, 0, 0.7)';
                    button.style.color = '#FFD700';
                    button.style.borderRadius = '8px';
                    button.style.border = '1px solid rgba(255, 215, 0, 0.3)';
                    
                    L.DomEvent.on(button, 'click', function(e) {
                        e.preventDefault();
                        map.setView([35, 105], defaultZoom);
                        document.getElementById('map-title').textContent = "长生桐全国门店分布";
                        document.getElementById('mobile-map-title').textContent = "长生桐全国门店分布";
                        document.querySelectorAll('.distance-line, .distance-label').forEach(el => el.remove());
                        document.getElementById('distance-result').textContent = "请选择两家门店进行计算";
                        document.getElementById('store-actions').style.display = 'none';
                        
                        // 重置省份筛选
                        document.querySelectorAll('.stat-item').forEach(i => {
                            i.classList.remove('active');
                        });
                        
                        // 重新渲染所有标记
                        renderMapMarkers();
                    });
                    
                    return container;
                }
            });
            
            map.addControl(new zoomHome());
            
            // 移动设备特殊处理：确保地图正确渲染
            setTimeout(function() {
                map.invalidateSize();
            }, 100);
            
            // 窗口大小变化时更新地图尺寸
            window.addEventListener('resize', function() {
                map.invalidateSize();
            });
            
            // 添加触摸事件监听器，确保地图可交互
            map.getContainer().addEventListener('touchstart', function(e) {
                e.stopPropagation();
            }, false);
            
            // PC端提示（5秒后消失）
            setTimeout(() => {
                document.querySelector('.zoom-tip').style.opacity = '0';
                setTimeout(() => {
                    document.querySelector('.zoom-tip').style.display = 'none';
                }, 1000);
            }, 5000);
            
            // 打开添加门店模态框
            document.getElementById('open-add-store-modal').addEventListener('click', function() {
                document.getElementById('add-store-modal').style.display = 'flex';
            });
            
            // 关闭添加门店模态框
            document.getElementById('close-add-store-modal').addEventListener('click', function() {
                document.getElementById('add-store-modal').style.display = 'none';
            });
            
            document.getElementById('cancel-add-store').addEventListener('click', function() {
                document.getElementById('add-store-modal').style.display = 'none';
            });
            
            // 添加门店功能
            document.getElementById('confirm-add-store').addEventListener('click', function() {
                const name = document.getElementById('store-name').value.trim();
                const type = document.getElementById('store-type').value;
                const province = document.getElementById('store-province').value;
                const city = document.getElementById('store-city').value.trim();
                const address = document.getElementById('store-address').value.trim();
                const manager = document.getElementById('store-manager').value.trim();
                const phone = document.getElementById('store-phone').value.trim();
                const hours = document.getElementById('store-hours').value.trim();
                const lat = parseFloat(document.getElementById('store-lat').value);
                const lng = parseFloat(document.getElementById('store-lng').value);
                
                // 验证输入
                if (!name || !type || !province || !city || !address || !manager || isNaN(lat) || isNaN(lng)) {
                    alert('请填写所有必填字段（带*号），并确保经纬度有效');
                    return;
                }
                
                // 创建新门店
                const newStore = {
                    id: stores.length > 0 ? Math.max(...stores.map(s => s.id)) + 1 : 1,
                    name,
                    type,
                    lat,
                    lng,
                    address,
                    province,
                    city,
                    manager
                };
                
                // 添加可选字段
                if (phone) newStore.phone = phone;
                if (hours) newStore.hours = hours;
                
                // 添加到门店列表
                stores.push(newStore);
                
                // 保存到本地存储
                saveStoresToLocalStorage();
                
                // 更新UI
                renderMapMarkers();
                generateCountryStats();
                updateStoreSelects();
                renderProvinceChart();
                
                // 清空表单
                document.getElementById('store-name').value = '';
                document.getElementById('store-city').value = '';
                document.getElementById('store-address').value = '';
                document.getElementById('store-manager').value = '';
                document.getElementById('store-phone').value = '';
                document.getElementById('store-hours').value = '';
                document.getElementById('store-lat').value = '';
                document.getElementById('store-lng').value = '';
                
                // 关闭模态框
                document.getElementById('add-store-modal').style.display = 'none';
                
                alert('门店添加成功！');
            });
            
            // 关闭编辑门店模态框
            document.getElementById('close-edit-store-modal').addEventListener('click', function() {
                document.getElementById('edit-store-modal').style.display = 'none';
            });
            
            document.getElementById('cancel-edit-store').addEventListener('click', function() {
                document.getElementById('edit-store-modal').style.display = 'none';
            });
            
            // 编辑门店功能
            document.getElementById('confirm-edit-store').addEventListener('click', function() {
                const id = parseInt(document.getElementById('edit-store-id').value);
                const name = document.getElementById('edit-store-name').value.trim();
                const type = document.getElementById('edit-store-type').value;
                const province = document.getElementById('edit-store-province').value;
                const city = document.getElementById('edit-store-city').value.trim();
                const address = document.getElementById('edit-store-address').value.trim();
                const manager = document.getElementById('edit-store-manager').value.trim();
                const phone = document.getElementById('edit-store-phone').value.trim();
                const hours = document.getElementById('edit-store-hours').value.trim();
                const lat = parseFloat(document.getElementById('edit-store-lat').value);
                const lng = parseFloat(document.getElementById('edit-store-lng').value);
                
                // 验证输入
                if (!name || !type || !province || !city || !address || !manager || isNaN(lat) || isNaN(lng)) {
                    alert('请填写所有必填字段（带*号），并确保经纬度有效');
                    return;
                }
                
                // 查找并更新门店
                const storeIndex = stores.findIndex(s => s.id === id);
                if (storeIndex !== -1) {
                    stores[storeIndex] = {
                        ...stores[storeIndex],
                        name,
                        type,
                        province,
                        city,
                        address,
                        manager,
                        phone,
                        hours,
                        lat,
                        lng
                    };
                    
                    // 保存到本地存储
                    saveStoresToLocalStorage();
                    
                    // 更新UI
                    renderMapMarkers();
                    generateCountryStats();
                    updateStoreSelects();
                    renderProvinceChart();
                    
                    // 更新当前显示的门店详情
                    updateStoreDetails(stores[storeIndex]);
                    
                    // 关闭模态框
                    document.getElementById('edit-store-modal').style.display = 'none';
                    
                    alert('门店信息更新成功！');
                } else {
                    alert('未找到要修改的门店，请重试');
                }
            });
            
            // 门店选择省份筛选功能
            document.getElementById('store1-province').addEventListener('change', function() {
                const province = this.value;
                const storeSelect = document.getElementById('store1');
                
                // 清空现有选项（保留第一个选项）
                while (storeSelect.options.length > 1) {
                    storeSelect.remove(1);
                }
                
                // 添加符合条件的门店
                stores.forEach(store => {
                    if (!province || store.province === province) {
                        const option = new Option(store.name, store.id);
                        storeSelect.add(option);
                    }
                });
            });
            
            document.getElementById('store2-province').addEventListener('change', function() {
                const province = this.value;
                const storeSelect = document.getElementById('store2');
                
                // 清空现有选项（保留第一个选项）
                while (storeSelect.options.length > 1) {
                    storeSelect.remove(1);
                }
                
                // 添加符合条件的门店
                stores.forEach(store => {
                    if (!province || store.province === province) {
                        const option = new Option(store.name, store.id);
                        storeSelect.add(option);
                    }
                });
            });
            
            // 数据导出功能
            document.getElementById('export-btn').addEventListener('click', function() {
                const dataStr = JSON.stringify(stores, null, 2);
                const dataUri = 'data:application/json;charset=utf-8,'+ encodeURIComponent(dataStr);
                
                const exportFileDefaultName = `长生桐门店数据_${new Date().toLocaleDateString()}.json`;
                
                const linkElement = document.createElement('a');
                linkElement.setAttribute('href', dataUri);
                linkElement.setAttribute('download', exportFileDefaultName);
                linkElement.click();
                
                alert('数据导出成功！已下载到您的设备。');
            });
            
            // 数据导入功能
            document.getElementById('import-btn').addEventListener('click', function() {
                document.getElementById('import-modal').style.display = 'flex';
            });
            
            // 关闭导入模态框
            document.getElementById('close-import-modal').addEventListener('click', function() {
                document.getElementById('import-modal').style.display = 'none';
            });
            
            document.getElementById('cancel-import').addEventListener('click', function() {
                document.getElementById('import-modal').style.display = 'none';
            });
            
            // 文件选择功能
            const fileInput = document.getElementById('file-input');
            const fileDropArea = document.getElementById('file-drop-area');
            const fileName = document.getElementById('file-name');
            
            fileDropArea.addEventListener('click', function() {
                fileInput.click();
            });
            
            fileInput.addEventListener('change', function() {
                if (fileInput.files.length > 0) {
                    fileName.textContent = `已选择: ${fileInput.files[0].name}`;
                } else {
                    fileName.textContent = "未选择文件";
                }
            });
            
            // 拖放功能
            fileDropArea.addEventListener('dragover', function(e) {
                e.preventDefault();
                fileDropArea.style.borderColor = '#FFD700';
                fileDropArea.style.background = 'rgba(0, 0, 0, 0.4)';
            });
            
            fileDropArea.addEventListener('dragleave', function() {
                fileDropArea.style.borderColor = 'rgba(255, 215, 0, 0.3)';
                fileDropArea.style.background = 'rgba(0, 0, 0, 0.3)';
            });
            
            fileDropArea.addEventListener('drop', function(e) {
                e.preventDefault();
                fileDropArea.style.borderColor = 'rgba(255, 215, 0, 0.3)';
                fileDropArea.style.background = 'rgba(0, 0, 0, 0.3)';
                
                if (e.dataTransfer.files.length) {
                    fileInput.files = e.dataTransfer.files;
                    fileName.textContent = `已选择: ${e.dataTransfer.files[0].name}`;
                }
            });
            
            // 确认导入数据
            document.getElementById('confirm-import').addEventListener('click', function() {
                if (fileInput.files.length === 0) {
                    alert('请先选择JSON文件');
                    return;
                }
                
                const file = fileInput.files[0];
                const reader = new FileReader();
                
                reader.onload = function(e) {
                    try {
                        const parsedData = JSON.parse(e.target.result);
                        
                        // 基本数据验证
                        if (!Array.isArray(parsedData)) {
                            throw new Error('导入的数据必须是数组格式');
                        }
                        
                        if (parsedData.length > 0 && !parsedData[0].name) {
                            throw new Error('数据格式不正确，缺少必要字段');
                        }
                        
                        stores = parsedData;
                        
                        // 重新生成ID以确保唯一性
                        stores.forEach((store, index) => {
                            store.id = index + 1;
                        });
                        
                        // 保存到本地存储
                        saveStoresToLocalStorage();
                        
                        renderMapMarkers();
                        generateCountryStats();
                        updateStoreSelects();
                        renderProvinceChart();
                        
                        document.getElementById('import-modal').style.display = 'none';
                        fileInput.value = '';
                        fileName.textContent = "未选择文件";
                        
                        alert(`成功导入${stores.length}家门店数据！`);
                    } catch (error) {
                        alert(`导入失败: ${error.message}`);
                        console.error('导入错误:', error);
                    }
                };
                
                reader.readAsText(file);
            });
            
            // 地图切换功能
            document.querySelectorAll('.map-switch-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const mapType = this.dataset.map;
                    initMapLayer(mapType);
                });
            });
            
            // 保存API密钥
            document.getElementById('save-api-key').addEventListener('click', function() {
                const apiKey = document.getElementById('api-key-input').value.trim();
                if (apiKey) {
                    localStorage.setItem(API_KEY_STORAGE_KEY, apiKey);
                    amapApiKey = apiKey;
                    alert('API密钥保存成功！地图服务已更新');
                    
                    // 更新高德地图URL
                    mapProviders.amap.url = `https://webst0{s}.is.autonavi.com/appmaptile?style=7&x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&key=${amapApiKey}`;
                    
                    // 重新加载高德地图
                    if (document.querySelector('.map-switch-btn[data-map="amap"]').classList.contains('active')) {
                        initMapLayer('amap');
                    }
                } else {
                    alert('请输入有效的API密钥');
                }
            });
            
            // 加载门店数据
            setTimeout(loadRealStoreData, 1000);
        });
    </script>
</body>
</html>